<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>套餐管理页面</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <link rel="stylesheet" href="../../../static/plugins/font-awesome/css/font-awesome.min.css">
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        .el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {
            display: none;
        }

        .el-tree .el-tree-node .el-checkbox .el-checkbox__inner {
            display: inline-block;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row>
        <el-button type="primary" icon="el-icon-edit" circle @click="openForm">套餐新增</el-button>
    </el-row>
    <template>

        <el-table
                :data="tableData.list"
                height="500"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    label="套餐名称"
                    prop="name" width="100">
            </el-table-column>
            <el-table-column
                    label="编码"
                    prop="code" width="100">
            </el-table-column>
            <el-table-column
                    label="帮助编码"
                    prop="helpCode" windth="100">
            </el-table-column>
            <el-table-column
                    label="性别"
                    prop="sex"
                    width="220">

                <template slot-scope="scope" width="180">
                    <label v-if="tableData.list[scope.$index].sex==0">男女适用</label>
                    <label v-if="tableData.list[scope.$index].sex==1">男</label>
                    <label v-if="tableData.list[scope.$index].sex==2">女</label>
                </template>
            </el-table-column>
            <el-table-column
                    label="适合年龄"
                    prop="age" width="150">
            </el-table-column>
            <el-table-column
                    label="价格"
                    prop="price" width="220">
            </el-table-column>
            <el-table-column
                    label="备注"
                    prop="remark" width="180">
            </el-table-column>
            <el-table-column
                    label="注意事项"
                    prop="attention" width="220">
            </el-table-column>
            <el-table-column
                    label="图片"
                    prop="img">
                <template slot-scope="scope" width="180">
                    <div class="block">
                        <el-image :src="tableData.list[scope.$index].img">
                            <div slot="placeholder" class="image-slot">
                                加载中<span class="dot">...</span>
                            </div>
                        </el-image>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    width="180"
                    label="操作">
                <template slot="header" slot-scope="scope">
                    <el-input
                            v-model="name"
                            size="mini"
                            placeholder="输入姓名查找" @input="showSetMemal(name)"/>
                </template>
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="dialogFormVisibleOpen(scope.row)">修改
                    </el-button>
                    <!--handleEdit(scope.$index, scope.row)-->

                    <el-button
                            size="mini"
                            type="danger"
                            @click="deleteSetMeal(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <el-pagination
            background
            layout="prev, pager, next"
            :current-page="tableData.pageNum"
            :page-size="tableData.pageSize"
            :total="tableData.total"
            @current-change="showSetMemal(name,$event)">
    </el-pagination>
    <p>当前为:{{tableData.pageNum}}页,总页数为:{{tableData.pages}},总条数为:{{tableData.total}}</p>


    <!--套餐编辑-->
    <el-dialog title="套餐编辑" :visible.sync="dialogFormVisible">
        <template>
            <el-tabs v-model="activeName">
                <el-tab-pane label="检查组编辑" name="first">
                    <el-form :model="form">
                        <el-form-item label="套餐编码" :label-width="formLabelWidth">
                            <el-input v-bind:disabled="flag" v-model="form.code" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="套餐帮助编码" :label-width="formLabelWidth">
                            <el-input v-model="form.helpCode" v-bind:disabled="flag" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="套餐姓名" :label-width="formLabelWidth">
                            <el-input v-model="form.name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="性别" :label-width="formLabelWidth">
                            <el-select v-model="form.sex" placeholder="请选择">
                                <el-option
                                        label="男女合适"
                                        value="0">
                                </el-option>
                                <el-option
                                        label="男"
                                        value="1">
                                </el-option>
                                <el-option
                                        label="女"
                                        value="2">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="适合年龄" :label-width="formLabelWidth">
                            <el-input v-model="form.age" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="价格" :label-width="formLabelWidth">
                            <el-input v-model="form.price" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="备注" :label-width="formLabelWidth">
                            <el-input v-model="form.remark" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="注意事项" :label-width="formLabelWidth">
                            <el-input
                                    type="textarea"
                                    :rows="2"
                                    placeholder="请输入内容"
                                    v-model="form.attention">
                            </el-input>
                        </el-form-item>
                        <b>图片:</b>
                        <el-upload
                                class="avatar-uploader"
                                action="/setMeal/uploadImg"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload"
                                :data="{'id':id}"
                                :on-error="error555" v-bind:disabled="flag2">
                            <img v-if="form.img" :src="form.img" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="检查项配置" name="second">
                    <table class="datatable">
                        <thead>
                        <tr>
                            <th>选择</th>
                            <th>角色名称</th>
                            <th>角色说明</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="c in setMealList">
                            <td>
                                <input :id="c.id" v-model="setMealIds" type="checkbox" :value="c.id">
                            </td>
                            <td><label :for="c.id">{{c.name}}</label></td>
                            <td><label :for="c.id">{{c.description}}</label></td>
                        </tr>
                        </tbody>
                    </table>
                </el-tab-pane>
            </el-tabs>
        </template>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible=false,setMealIds=[]">取 消</el-button>
            <el-button type="primary" @click="updateSetMeal">确 定</el-button>
        </div>
    </el-dialog>

    <!--套餐新增-->
    <el-dialog title="新增套餐" :visible.sync="dialogFormVisible2">
        <el-form :model="form2">
            <el-form-item label="套餐编码" :label-width="formLabelWidth">
                <el-input v-bind:disabled="flag" v-model="form2.code" @blur="count(form2.code)" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="套餐帮助编码" :label-width="formLabelWidth">
                <el-input v-model="form2.helpCode" v-bind:disabled="flag" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="套餐姓名" :label-width="formLabelWidth">
                <el-input v-model="form2.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-select v-model="form2.sex" placeholder="请选择">
                    <el-option
                            label="男女合适"
                            value="0">
                    </el-option>
                    <el-option
                            label="男"
                            value="1">
                    </el-option>
                    <el-option
                            label="女"
                            value="2">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="适合年龄" :label-width="formLabelWidth">
                <el-input v-model="form2.age" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="价格" :label-width="formLabelWidth">
                <el-input v-model="form2.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="form2.remark" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="注意事项" :label-width="formLabelWidth">
                <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="form2.attention">
                </el-input>
            </el-form-item>
            <el-form-item label="选择你要加入的项目" :label-width="formLabelWidth">
                <el-tree
                        :data="checkGroupTree"
                        show-checkbox
                        node-key="id"
                        ref="tree"
                        highlight-current
                        node-key="id">
                </el-tree>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible2=false">取消</el-button>
            <el-button type="primary" @click="addSetMeal(form2)">确 定</el-button>
        </div>
    </el-dialog>

</div>
</body>
<script src="../../../static/js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../../../static/js/jquery.min.js"></script>
<script src="../../../static/js/axios-0.18.0.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            tableData: [],
            name: '',
            pageNum: '',
            form: {
                id: '',
                name: '',
                code: '',
                helpCode: '',
                sex: '',
                age: '',
                price: '',
                remark: '',
                attention: '',
                img: ''
            },
            id: '',
            setMealName: '',
            flag2: '',
            flag: '',
            checkGroupTree: [{
                id: '',
                label: '',
                children: [{
                    id: '',
                    label: ''
                }]
            }]
        }, data() {
            return {
                tableData: [],
                name: '',
                pageNum: '',
                form: {
                    id: '',
                    name: '',
                    code: '',
                    helpCode: '',
                    sex: '',
                    age: '',
                    price: '',
                    remark: '',
                    attention: '',
                    img: ''
                }, dialogFormVisible: false,
                dialogFormVisible2: false,
                formLabelWidth: '120px',
                id: '',
                setMealName: '',
                flag: '',
                flag2: '',
                form2: {
                    id: '',
                    name: '',
                    code: '',
                    helpCode: '',
                    sex: '',
                    age: '',
                    price: '',
                    remark: '',
                    attention: '',
                    img: ''
                }, checkGroupTree: [{
                    id: '',
                    label: '',
                    children: [{
                        id: '',
                        label: ''
                    }]
                }],
                setMealIds: [],
                setMealList: [],
                activeName:'first',
            }
        }, methods: {
            showSetMemal(name, pageNum) {
                this.pageNum = pageNum;
                axios.get("/setMeal/showSetMeal", {
                    params: {
                        'name': this.name,
                        'pageNum': pageNum
                    }
                }).then(data => {
                    if (data.data.code == '-998') {
                        this.$message({
                            showClose: true,
                            message: '你无该权限!!',
                            type: 'error'
                        });
                    } else if (data.data.code == '' || data.data.code == null) {
                        this.tableData = data.data;
                    } else {
                        this.$message({
                            showClose: true,
                            message: '显示失败!',
                            type: 'error'
                        });
                    }
                }).catch(e => {
                    alert("错误信息为:" + e)
                });
            }, deleteSetMeal(row) {
                this.$confirm('此操作将永久删除该会员, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get("/setMeal/deleteSetMeal", {
                        params: {
                            'id': row.id
                        }
                    }).then(data => {
                        if (data.data.code == '-998') {
                            this.$message({
                                showClose: true,
                                message: '你无该权限!',
                                type: 'error'
                            });
                        } else if (data.data == true || data.data == 'true') {
                            this.$message({
                                showClose: true,
                                message: '删除成功!',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                showClose: true,
                                message: '删除失败!',
                                type: 'error'
                            });
                        }
                        this.showSetMemal(this.name, this.pageNum);
                    }).catch(e => {
                        alert("错误信息为:" + e)
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            }, handleAvatarSuccess(res, file) {
                this.form.img = URL.createObjectURL(file.raw);
                this.$message({
                    message: '图片上传完成!',
                    type: 'success'
                });

                this.showSetMemal(this.name, this.pageNum)
            }, error555() {
                this.$message({
                    message: '图片上传失败!',
                    type: 'success'
                });
                this.showSetMemal(this.name, this.pageNum)
            },
            beforeAvatarUpload(file) {
                let types = ['image/jpeg', 'image/jpg', 'image/gif', 'image/bmp', 'image/png'];
                const isImage = types.includes(file.type);
                /**
                 * 获取文件后缀
                 * @type {boolean}
                 */
                /**
                 * 获取文件 大小
                 * @type {boolean}
                 */
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isImage) {
                    this.$message.error('上传头像图片只能是JPEG,JPG,PNG,GIF,BMP格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isImage && isLt2M;
            }, dialogFormVisibleOpen(form) {
                this.setMealName = '套餐编辑';
                this.flag2 = false;
                this.flag = true;
                this.form.id = form.id;
                this.form.age = form.age;
                this.form.name = form.name;
                this.form.code = form.code;
                this.form.sex = form.sex;
                this.form.helpCode = form.helpCode;
                this.form.attention = form.attention;
                this.form.price = form.price;
                this.form.remark = form.remark;
                this.form.img = form.img;
                this.id = form.id;
                axios.get("/setMeal/showCheckGroup").then(data => {
                    if (data.data.code=='-998'){
                        this.$message.error('你无该权限!');
                    }else if (data.data.code==''||data.data.code==null){
                     this.setMealList=data.data;
                     axios.get("/setMeal/showCheckGroupById",{
                         params:{
                             'id':form.id
                         }
                     }).then(data =>{
                         if (data.data.code==''||data.data.code==null){
                             this.setMealIds=data.data;
                         }
                     });
                    }else {
                        this.$message.error('显示失败!!');
                    }
                });
                this.dialogFormVisible = true;
            }, updateSetMeal() {
                axios.post("/setMeal/updateSetMeal.do?checkGroupIds="+this.setMealIds,this.form).then(data => {
                    if (data.data.code == '-998') {
                        this.$message.error('你无该权限!');
                    } else if (data.data == true || data.data == 'true') {
                        this.$message({
                            showClose: true,
                            message: '修改成功!',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('修改失败!');
                    }
                    this.setMealIds=[];
                    this.showSetMemal(this.name, this.pageNum);
                    this.dialogFormVisible = false;
                }).catch(e => {
                    alert("错误信息为:" + e)
                });
            }, openForm() {
                this.showCheckGroup();
                this.flag = false;
                this.flag2 = true;
                this.setMealName = "套餐新增";
                this.dialogFormVisible2 = true;

            }, showCheckGroup() {
                axios.get("/setMeal/showInspectionGroupInspectionItems").then(data => {
                    if (data.data.code == '-998') {
                        this.$message.error('你无该权限!');
                    } else if (data.data.code == '' || data.data.code == null) {
                        this.checkGroupTree = data.data;
                    } else {
                        this.$message.error('显示失败!');
                    }
                }).catch(e => {
                    alert("错误信息为:" + e)
                });
            }, addSetMeal(form) {
                var setmeal = {
                    'id': form.id,
                    'age': form.age,
                    'name': form.name,
                    'code': form.code,
                    'sex': form.sex,
                    'helpCode': form.helpCode,
                    'attention': form.attention,
                    'price': form.price,
                    'remark': form.remark
                }

                let checkgroupKey = this.$refs.tree.getCheckedKeys();
                axios.post("/setMeal/addSetMeal", {"setmeal": setmeal, "checkgroupKey": checkgroupKey}).then(data => {
                    if (data.data.code == '-998') {
                        this.$message.error('你无该权限!');
                    } else if (data.data == true || data.data == 'true') {
                        this.$message({
                            showClose: true,
                            message: '新增成功!',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('新增失败!');

                    }
                    this.dialogFormVisible2 = false;
                    this.showSetMemal(this.name, this.pageNum);
                }).catch(e => {

                    alert("错误信息为:" + e)
                    this.dialogFormVisible2 = false;
                    this.showSetMemal(this.name, this.pageNum);
                });
            },
            count(code){
                axios.get("/checkGroup/count",{
                    params:{
                        'code':code
                    }
                }).then(data =>{
                    if (data.data.code=='-998'){
                        this.$message({
                            showClose: true,
                            message: '你无该权限!',
                            type: 'error'
                        });
                    }else if (data.data){

                    }else{
                        this.$message({
                            showClose: true,
                            message: '编码不能唯一!',
                            type: 'error'
                        });
                    }
                })
            }
        }, created() {
            this.showSetMemal();
        }
    });
</script>
</html>